<template>
  <div>
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" @click="back"/>
      <div class="title">技能评价</div>
      <div class="save" @click="saveBack">保存</div>
    </div>
    <div class="base_message">
      <div class="tech_base tech_line">
        <div class="tech_name">技能名称</div>
        <input class="tech_text" type="text" placeholder="请输入技能名称" v-model="data.skillName"/>
      </div>
      <div class="tech_base">
        <div class="tech_name">熟练程度</div>
        <div class="score_flex">
        <div class="score" @click="showActive(2)">
          <span :class="{circle:true, active: index===2 }"></span><span class="score_value">2分</span>
        </div>
        <div class="score" @click="showActive(4)">
          <span :class="{ circle:true, active: index===4 }"></span><span class="score_value">4分</span>
        </div>
        <div class="score" @click="showActive(6)">
          <span :class="{ circle:true, active: index===6 }"></span><span class="score_value">6分</span>
        </div>
        <div class="score" @click="showActive(8)">
          <span :class="{ circle:true, active: index===8 }"></span><span class="score_value">8分</span>
        </div>
        <div class="score" @click="showActive(10)">
          <span :class="{ circle:true, active: index===10 }"></span><span class="score_value">10分</span>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Toast} from 'mint-ui'
  export default {
    name: "Technology",
    data(){
      return{
        index:0,
        data:{
          skillLevel:null,
          skillName:null
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      showActive(index){
        this.data.skillLevel = index
        this.index = index
      },
      saveBack(){
        if(!this.data.skillName){
          Toast({
            message: '请输入技能名称',
            position: 'middle',
            duration: 1000
          });
        }
        else if(!this.data.skillLevel){
          Toast({
            message: '请选择分数',
            position: 'middle',
            duration: 1000
          });
        }else{
          this.$store.dispatch("action_addSkill", this.data)
          this.$router.back()
        }
      }
    }
  }
</script>

<style scoped>
  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .save {
    font-size: 28px;
    color: #ffffff;
  }
  .base_message{
    padding: 0 30px;
    background-color: #ffffff;
  }
  .tech_base{
    height: 143px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
  }
  .tech_name{
    font-size:28px;
    font-weight:400;
    color:rgba(43,43,43,1);
  }
  .tech_text{
    font-size:24px;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .tech_line{
    border-bottom: 1px solid #efefef;
  }
  .score_flex{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .score{
    display: flex;
    align-items: center;
    margin-right: 32px;
  }
  .circle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border:2px solid rgba(153,153,153,1);
    border-radius: 50%;
    margin-right: 12px;
  }
  .score_value{
    font-size:24px;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .active{
    background: url("~@/assets/images/selected_round.png") left center no-repeat;
    background-size: cover;
    background-origin: border-box;
  }
</style>
